@import "../../../styles/index";

.RangeSlider {
  $this: &;

  &-Slider {
    position: relative;
    width: 100%;
    height: 5px;
    margin: 30px 0;

    &-Track {
      height: 100%;
      position: absolute;
      background-color: $color-primary;
    }

    &-Input {
      position: absolute;
      width: 100%;
      background: none;
      pointer-events: none;
      top: 50%;
      transform: translateY(-50%);
      appearance: none;
      padding: 0;
      margin: 0;
    }

    & input[type="range"]::-webkit-slider-thumb {
      height: 25px;
      width: 25px;
      border-radius: 50%;
      border: 3px solid $color-white;
      background: $color-white;
      pointer-events: auto;
      appearance: none;
      -moz-appearance: none;
      cursor: pointer;
      box-shadow: 0 0.125rem 0.5625rem -0.125rem rgba(0, 0, 0, 0.25);
    }

    & input[type="range"]::-moz-range-thumb {
      height: 25px;
      width: 25px;
      border-radius: 50%;
      border: 3px solid $color-white;
      background: $color-white;
      pointer-events: auto;
      appearance: none;
      -moz-appearance: none;
      cursor: pointer;
      box-shadow: 0 0.125rem 0.5625rem -0.125rem rgba(0, 0, 0, 0.25);
    }

    &-WapperTooltip {
      position: absolute;
      pointer-events: none;
    }

    &-Tooltip {
      padding: 0.25rem 0.5rem;
      border: 0;
      background: #373f50;
      color: $color-white;
      border-radius: 0.25rem;
      bottom: 120%;
      display: block;
      text-align: center;
      white-space: nowrap;
      //pointer-events: auto; // enables/disables interaction with tooltip
    }

    &-Tooltip-Min {
      transform: translateY(-200%);
      z-index: 10;
    }

    &-Tooltip-Max {
      transform: translateY(-200%);
      z-index: 10;
    }
  }
}
